import * as React from 'react';
import { useState } from 'react';

declare global {
  interface Window {
    api: {
      versions: {
        electron: string;
        chrome: string;
        node: string;
      };
    };
  }
}

function Versions(): JSX.Element {
  const [versions] = useState(window.api.versions);

  return (
    <ul className="versions">
      <li className="electron-version">Electron v{versions.electron}</li>
      <li className="chrome-version">Chromium v{versions.chrome}</li>
      <li className="node-version">Node v{versions.node}</li>
    </ul>
  );
}

export default Versions;

